<template>
    <div class="goods">
        <div class="left-wrap">
            <ul>
                <li v-for="(item, i) in goods" :key="item.name" class="item-wrap" :class="{'current':currentIndex===i}" @click="selectMenu(i,$event)">
                    <span class="icon" v-show="item.type>0" :class="classMap[item.type]"></span><span class="text">{{item.name}}</span>
                </li>
            </ul>
        </div>
        <div class="right-wrap">
            <ul>
                <li v-for="item in goods" :key="item.name" class="foods-list">
                    <div class="title">{{item.name}}</div>
                    <ul>
                        <li v-for="foods in item.foods" :key="foods.name" class="content-wrap">
                            <div class="icon">
                                <img :src="foods.icon" alt="">
                            </div>
                            <div class="content">
                                <div class="name">{{foods.name}}</div>
                                <div class="desc">{{foods.description}}</div>
                                <div class="extra">
                                    <span class="sale">月售{{foods.sellCount}}份</span>
                                    <span class="rating"> 好评率{{foods.rating}}%</span></div>
                                <div class="price">
                                    <span class="nowPrice">￥{{foods.price}}</span>
                                    <span class="oldPrice" v-show="foods.oldPrice">￥{{foods.oldPrice}}</span>
                                </div>
                                <div class="count-wrapper">
                                    <countcontrol :food="foods"></countcontrol>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <shopCart :Dseller="seller" :selected-foods="selectedFoods"></shopCart>
    </div>

</template>

<script>
import BScroll from 'better-scroll'
import shopCart from '../shopcart/shopcart.vue'
import countcontrol from '../cartcontrol/cartcontrol.vue'
export default {
  data() {
    return {
      goods: [],
      listHeight: [],
      scrollY: 0,
      showFlag: false
    }
  },
  props: ['seller'],
  created() {
    this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee']
    this.$http.get('http://goodsdata.wazaxa.club/', {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(res => {
        this.goods = res.body.goods
        console.log(this.goods)
        console.log(res)
        this.$nextTick(() => {
            this.initScroll()
            this.calHeight()
        })
    })
  },
  methods: {
      initScroll() {
          this.menuScroll = new BScroll(document.querySelector('.left-wrap'), {
              click: true
          })
          this.foodsScroll = new BScroll(document.querySelector('.right-wrap'), {
              probeType: 3,
              click: true
          })
          this.foodsScroll.on('scroll', (pos) => {
              this.scrollY = Math.abs(Math.round(pos.y))
          })
      },
      calHeight () {
          let height = 0
          this.listHeight.push(height)
          let foodsList = document.querySelectorAll('.foods-list')
          for (var i = 0; i < foodsList.length; i++) {
              var item = foodsList[i]
              height += item.clientHeight
              this.listHeight.push(height)
          }
      },
      selectMenu (i, e) {
          if (!e._constructed) {
              return
          }
          let foodsList = document.querySelectorAll('.foods-list')
          let el = foodsList[i]
          this.foodsScroll.scrollToElement(el, 300)
      }
  },
  computed: {
      currentIndex() {
          for (var i = 0; i < this.listHeight.length; i++) {
              var height1 = this.listHeight[i]
              var height2 = this.listHeight[i + 1]
              if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
                  return i
              }
          }
          return 0
      },
      selectedFoods () {
          let foods = []
          this.goods.forEach((good) => {
              good.foods.forEach((food) => {
                  if (food.count) {
                      foods.push(food)
                  }
              })
          })
          return foods
      }
  },
  components: {
      shopCart,
      countcontrol
  }
}
</script>

<style lang="scss" scoped>
@import "../../common/scss/basees.scss";
// @import '../../common/scss/_base.scss';
@import "../../common/scss/_mixins.scss";
.goods {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  .left-wrap {
    flex: 0 0 80px;
    .item-wrap {
      width: 80px;
      height: 54px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid rgba(7, 17, 27, 0.1);
      background-color: #f3f5f7;
        &.current {
            font-size: 12px;
            background-color: #fff;
            font-weight: 550;
        }
      .icon {
        width: 16px;
        height: 16px;
        margin-right: 3px;
        &.decrease {
          @include bg-image("decrease_3");
        }
        &.discount {
          @include bg-image("discount_3");
        }
        &.guarantee {
          @include bg-image("guarantee_3");
        }
        &.invoice {
          @include bg-image("invoice_3");
        }
        &.special {
          @include bg-image("special_3");
        }
      }
      .text {
        font-size: 12px;
        line-height: 14px;
        width: 70%;
      }
    }
  }
  .right-wrap {
    flex: 1;
    overflow: hidden;
    .title {
      font-size: 12px;
      color: rgb(147, 153, 159);
      line-height: 26px;
      padding-left: 14px;
      border-left: 2px solid #d9dde1;
      background-color: #f3f5f7;
    }
    .content-wrap {
        display: flex;
        padding: 18px;
        border-bottom: 1px solid rgba(7,17,27,0.1);
        padding-bottom: 18px;
        position: relative;
        .icon {
            flex: 0 0 80px;
            margin-right: 10px;
            height: 80px;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .content {
            .name {
                font-size: 14px;
                color: rgb(7,17,27);
                line-height: 28px;
            }
            .desc {
                font-size: 13px;
                color: rgb(147,153,159);
                line-height: 20px;
                margin: 8px 0;
                overflow: auto;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 170px;
            }
            .extra {
                .sale {
                    font-size: 13px;
                    color: rgb(147,153,159);
                    line-height: 20px;
                    margin: 8px 0;
                }
                .rating {
                    font-size: 13px;
                    color: rgb(147,153,159);
                    line-height: 20px;
                    margin: 8px 0;
                    margin-left: 12px;
                }
            }
            .price {
                .nowPrice {
                    font-size: 14px;
                    color: rgb(240,20,20);
                    font-weight: 700;
                    line-height: 24px;
                }
                .oldPrice {
                    text-decoration: line-through;
                    font-size: 10px;
                    color: rgb(147, 153, 159);
                    font-weight: 700;
                    line-height: 24px;
                }
            }
            .count-wrapper {
                position: absolute;
                right: 20px;
                bottom: 0;
            }
        }
    }
  }
}
</style>
